<template>
  <div class="main wh-full">
    <my-header class="header-main">
      <login-bar></login-bar>
    </my-header>
    <el-container>
      <!-- 左侧表格栏目 -->
      <el-aside width="24%">
        <ce-aside-comp @onRowClick='getRowData' >
        </ce-aside-comp>
      </el-aside>
      <!-- 主要body -->
      <el-main v-loading='showLoading'>
        <!-- K线图头部 -->
        <div class="panel-head flex flex-v-center">
          <img
            class="currency-thumb thumb-30"
            :src="currentCoinInfo.logo"
            alt=""
          >
          <div class="heading">{{tradecoin}}/{{maincoin}}</div>
          <div class="market-val flex flex-v-center">
            <span class="font-16">{{currentCoinInfo.prise*1}}</span>
            <!-- <span class="font-14 color-666">≈0.05 CNY </span> -->
          </div>
          <div class="market-condition font-12">
            <span>
              <em
                class="color-666"
                v-text="$t('increase')||'涨幅'"
              ></em>
              <i
                :class="currentCoinInfo.rise*1>0?'color-danger':'color-success'"
                v-text='currentCoinInfo.rise*1+"%"'
              >
              </i>
            </span>
            <span>
              <em
                class="color-666"
                v-text="$t('high')||'高'"
              ></em>
              <i>{{currentCoinInfo.height*1}}</i>
            </span>
            <span>
              <em
                class="color-666"
                v-text="$t('low')||'低'"
              ></em>
              <i>{{currentCoinInfo.low*1}}</i>
            </span>
            <span>
              <em
                class="color-666"
                v-text="$t('dayVol')||'24H量'"
              ></em>
              <i>{{currentCoinInfo.number*1}}&nbsp;{{tradecoin}}</i>
            </span>
          </div>
        </div>
        <!-- K线图 -->
        <div
          id='kMap'
          class="k-map"
        >
          <!-- <iframe
            id='iframe'
            :src="iframUrl"
            width="100%"
            height="100%"
            frameborder="0"
          ></iframe> -->
        </div>
        <div class="panel-container flex flex-between">
          <div class="content-lf flex flex-between">
            <!-- 买入 -->
            <div class="form-wrap">
              <div
                class="font-18 font-bit-bold"
                v-html="buyingLabel"
              ></div>
              <div class="break-line"></div>
              <div class="account flex flex-between">
                <span
                  class="balance"
                  v-html="availabelBalance"
                ></span>
                <router-link
                  to='./property'
                  v-text="$t('recharge')||'充值'"
                ></router-link>
              </div>
              <div class="input-group">
                <label v-text="$t('buyingRate')||'买入价'"></label>
                <el-input
                  :disabled='true'
                  v-model="buyFormData.price"
                >
                  <span
                    class="unit"
                    slot="suffix"
                    v-text="maincoin"
                  ></span>
                </el-input>
                <!-- <em class="hint font-12">≈0.05</em> -->
              </div>
              <div class="input-group">
                <label v-text="$t('buyVol')||'买入量'"></label>
                <el-input
                  :disabled='true'
                  v-model="buyFormData.orderVol"
                >
                  <span
                    class="unit"
                    slot="suffix"
                    v-text="tradecoin"
                  ></span>
                </el-input>
              </div>
              <div class="total flex flex-between">
                <span v-text="totalLabel"></span>
                <i v-text="buyTotal*1"></i>
              </div>
              <button
                :disabled='true'
                @click="buyHandle"
                class="btn-block btn-large btn-danger btn-active"
                v-html="buyingLabel"
              >
              </button>
            </div>
            <!-- 卖出 -->
            <div class="form-wrap">
              <div
                class="font-18 font-bit-bold"
                v-html="sellingLabel"
              ></div>
              <div class="break-line"></div>
              <div class="account flex flex-between">
                <span
                  class="balance"
                  v-html="availabelAmount"
                ></span>
                <router-link
                  to='./property'
                  v-text="$t('recharge')||'充值'"
                ></router-link>
              </div>
              <div class="input-group">
                <label v-text="$t('sellingRate')||'卖出价'"></label>
                <el-input
                  :disabled='true'
                  v-model="sellFormData.price"
                >
                  <span
                    class="unit"
                    slot="suffix"
                    v-text="maincoin"
                  ></span>
                </el-input>
                <!-- <em class="hint font-12">≈0.05</em> -->
              </div>
              <div class="input-group">
                <label v-text="$t('sellVol')||'卖出量'"></label>
                <el-input
                  :disabled='true'
                  v-model="sellFormData.orderVol"
                >
                  <span
                    class="unit"
                    slot="suffix"
                    v-text="tradecoin"
                  ></span>
                </el-input>
              </div>
              <div class="total flex flex-between">
                <span v-text="totalLabel"></span>
                <i v-text="sellTotal*1"></i>
              </div>
              <button
                :disabled='true'
                @click="sellHandle"
                class="btn-block btn-large btn-success btn-active"
                v-html="sellingLabel"
              >
              </button>
            </div>
          </div>
          <!-- 交易行情 -->
          <div class="trade-market">
            <div class="flex flex-between flex-v-center">
              <span class='font-18'>
                <i v-html="latestPrice"></i>
                <!-- <em class="font-12 color-666">≈ 0.05 CNY</em> -->
              </span>
              <!-- <router-link to=''>更多</router-link> -->
            </div>
            <div class="break-line"></div>
            <div class="table">
              <div class="thead">
                <span v-text='$t("stalls")||"档位"'></span>
                <span v-text='priceLabel'></span>
                <span v-text='amountLabel'></span>
                <span
                  class="txt-rt"
                  v-text='totalLabel'
                ></span>
              </div>
              <!-- 卖出五档图 -->
              <div
                class="tbody"
                v-if="latestSoldData&&latestSoldData[0]"
              >
                <template v-for="(item,index) in latestSoldData">
                  <div
                    @click="onLatestClick(item)"
                    class="row flex p-rel"
                    :key='index'
                  >
                    <div
                      :style='{width:(item.total/sellListTotal)*400+"%"}'
                      class="progress p-abs"
                    ></div>
                    <span class="column color-success">
                      {{$t('sell')}}&nbsp;{{latestSoldData.length-index}}
                    </span>
                    <span
                      style="width:25%;"
                      class="column"
                    >{{item.price|toFix(3)}}</span>
                    <span class="column">{{(item.number*1)|toFix(3)}}</span>
                    <span class="column txt-rt">{{item.total|toFix(3)}}</span>
                  </div>
                </template>
              </div>
              <div
                class="no-data"
                v-else
                v-text="$t('label108')"
              ></div>
            </div>
            <div class="break-line m-top-10 m-bottom-10"></div>
            <div class="table">
              <!-- 买入五档图 -->
              <div
                class="tbody"
                v-if="latestBuyData&&latestBuyData[0]"
              >
                <template v-for="(item,index) in latestBuyData">
                  <div
                    @click="onLatestClick(item)"
                    class="row flex flex-between p-rel"
                    :key='index'
                  >
                    <div
                      :style='{width:(item.total/sellListTotal)*400+"%"}'
                      class="progressred p-abs"
                    ></div>
                    <span
                      class="column color-danger"
                      v-html="$t('buy')+'&nbsp;'+(index+1)"
                    >
                    </span>
                    <span class="column">{{item.price|toFix(3)}}</span>
                    <span class="column">{{item.number|toFix(3)}}</span>
                    <span class="column txt-rt">{{item.total|toFix(3)}}</span>
                  </div>
                </template>
              </div>
              <div
                class="no-data"
                v-else
                v-text="$t('label108')"
              ></div>
            </div>
          </div>
        </div>
        <div class="panel-container flex flex-between">
          <div class="content-lf">
            <!-- 当前委托 -->
            <div
              class="panel-title font-18 font-bit-bold"
              v-text="$t('currEnstrument')||'当前委托'"
            ></div>
            <template v-if="userData.isLogin">
              <el-table
                stripe
                :data='currentDeclareData'
              >
                <el-table-column
                  width="140"
                  :label='$t("date")||"日期"'
                  prop='writedate'
                >
                </el-table-column>
                <el-table-column
                  width='100'
                  :label='$t("type")||"类型"'
                >
                  <span
                    slot-scope="scope"
                    :class="scope.row.type=='0'?'color-danger':'color-success'"
                    v-text="scope.row.type=='0'?$t('buy'):$t('sell')"
                  >
                  </span>
                </el-table-column>
                <el-table-column :label='priceLabel'>
                  <template slot-scope="scope">
                    {{scope.row.price*1|toFix(3)}}
                  </template>
                </el-table-column>
                <el-table-column :label='marketVolLabel'>
                  <template slot-scope="scope">
                    {{scope.row.number|toFix(3)}}
                  </template>
                </el-table-column>
                <el-table-column :label='$t("volumn")||"成交量"'>
                  <template slot-scope="scope">
                    {{scope.row.dealnumber|toFix(3)}}
                  </template>
                </el-table-column>
                <el-table-column
                  :width="$i18n.locale==='zh-CN'?'60':'120'"
                  :label='$t("operation")||"操作"'
                >
                  <span
                    class="handle color-danger"
                    @click='cancelOrder(scope.row.id,scope.row.type,scope.row.number,scope.row.price)'
                    slot-scope="scope"
                    v-text="$t('withdrawed'||'撤单')"
                  >
                  </span>
                </el-table-column>
              </el-table>
            </template>
            <unlogin-tip></unlogin-tip>
            <!-- 历史委托 -->
            <div
              class="panel-title font-18 font-bit-bold"
              v-text="$t('oldEnstrument')||'历史委托'"
            ></div>
            <template v-if="userData.isLogin">
              <el-table
                stripe
                :data='historicalDeclareData'
                max-height='500'
              >
                <el-table-column
                  width="140"
                  :label='$t("date")||"日期"'
                  prop='writedate'
                >
                </el-table-column>
                <el-table-column
                  width='100'
                  :label='$t("type")||"类型"'
                >
                  <span
                    slot-scope="scope"
                    :class="scope.row.type=='0'?'color-danger':'color-success'"
                    v-text="scope.row.type=='0'?$t('buy'):$t('sell')"
                  >
                  </span>
                </el-table-column>
                <el-table-column :label='priceLabel'>
                  <template slot-scope="scope">
                    {{scope.row.price|toFix(3)}}
                  </template>
                </el-table-column>
                <el-table-column :label='marketVolLabel'>
                  <template slot-scope="scope">
                    {{scope.row.number|toFix(3)}}
                  </template>
                </el-table-column>
                <el-table-column :label='$t("volumn")||"成交量"'>
                  <template slot-scope="scope">
                    {{scope.row.dealnumber|toFix(3)}}
                  </template>
                </el-table-column>
                <el-table-column
                  :width="$i18n.locale=='zh-CN'?'100':'120'"
                  :label='$t("operation")||"操作"'
                >
                  <template slot-scope="scope">
                  <span
                    :class="scope.row.state=='2'?'color-danger':'color-success'"
                    v-text="scope.row.state=='2'?'已撤销':'已完成'"
                  >
                  </span>
                </template>  
                </el-table-column>
              </el-table>
            </template>
            <unlogin-tip></unlogin-tip>
          </div>
          <!-- 右侧内容(成交) -->
          <div class="content-rt">
            <div class="panel-title flex flex-between">
              <span
                class="font-18 font-bit-bold"
                v-text="$t('tradeRecord')||'成交历史'"
              ></span>
              <!-- <router-link to=''>更多</router-link> -->
            </div>
            <template v-if="userData.isLogin">
              <div class="break-line"></div>
              <el-table
                style="font-weight:normal"
                :data='historicalBuyData'
                :cell-style='myCellStyle'
                max-height='700'
                stripe
              >
                <el-table-column
                  width='120'
                  :label='$t("time")||"时间"'
                >
                  <span
                    class="color-danger"
                    slot-scope="scope"
                    v-text="scope.row.writedate"
                  ></span>
                </el-table-column>
                <el-table-column :label='priceLabel'>
                  <template slot-scope="scope">
                    {{scope.row.price|toFix(3)}}
                  </template>
                </el-table-column>
                <el-table-column :label='amountLabel'>
                  <template slot-scope="scope">
                    {{scope.row.number|toFix(3)}}
                  </template>
                </el-table-column>
                <el-table-column
                  align='right'
                  :label='totalLabel'
                >
                  <div slot-scope="scope">{{scope.row.total|toFix(3)}}</div>
                </el-table-column>
              </el-table>
            </template>
            <unlogin-tip></unlogin-tip>
          </div>
        </div>
      </el-main>
    </el-container>
    <my-footer></my-footer>
  </div>
</template>
<script>
import mainCoinModel from "@/model/allCoinModel.js";
import { Loading } from "element-ui";
import { randomString } from "@/assets/js/common.js";
import { checkTradePassword } from "../../service/TradeService.js";
import CeAsideComp from "@/components/aside/CEasideComp.vue";
let ajaxDone = true;
export default {
  components: { CeAsideComp },
  data() {
    return {
      show: false,
      showLoading: false,
      userData: this.userModel,
      buyFormData: {
        price: 0,
        orderVol: 0
      },
      sellFormData: {
        price: 0,
        orderVol: 0
      },
      dataMaxLen: 5,
      currentId: 1,
      tableData: null,
      //最新买入
      latestBuyData: [],
      //最新卖出
      latestSoldData: [],
      //当日委托
      currentDeclareData: null,
      //历史委托
      historicalDeclareData: null,
      //成交历史
      historicalBuyData: null,
      maincoin: null,
      tradecoin: null,
      // 余额
      myBlance: 0,
      //当日可用
      myAvailable: "",
      // 当前币种
      currentCoinInfo: "",
      // 充币地址
      chargeAddress: "",
      // 充币二维码
      qrCode: null,
      bindState: null,
      // 是否能够交易
      canTrade: false,
      isGetSocketMsg: false,
      // iframUrl: "./static/kline.html?",
      timer: null,
      autoStart: false,
      timerOut: null,
      websock: null,
      userno:'',
      coinno:'',
      token:'',
      timemint:null,
      timeall:'',
      coinPrice:'',
      coinPricegus:'',
      priseArrUp:[],
      priseArrDown:[],
      price:'',
      apidoData:{
        heightprice: "",
        lastprice: "",
        number: "",
        numbergas: "",
        pricegas: "",
        tradtime: ""
      },
      shellorbuypeice:'',
      tradcoin:'',
      maincoin:'',
    };
  },
  created(){
    this.userno=this.getNum();//生成32位随机码
    this.$bus.on("tradeCoinLoad", coinData => {
      this.loadData(coinData);
    });
    //页面刚进入时开启长连接
    // this.initWebSocket()
  },
  destroyed: function() {
    //页面销毁时关闭长连接
    this.websocketclose();
　},
  mounted() {
    
    this.timeall=this.getIntNum(2,4);
    console.log('随机到的时间'+this.timeall+'分钟');
    // this.start(this.timeall)
    if ('WebSocket' in window) {
      // 启动WebSocket
      this.initWebSocket()
    } else {
      console.log('当前浏览器 不支持 support websocket');
      return
    };
    
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer);
    this.timer = null;
    next();
  },
  methods: {
    initWebSocket(){ //初始化weosocket 
      // const wsuri = process.env.NODE_ENV + "/websocket/threadsocket";//ws地址
      // const wsuri =this.api.klineSocketUrl;
      // console.log(this.api.klineSocketUrl);
      // this.websock= new WebSocket("ws://192.168.16.223/ws/websocket/"+this.userno+"/"+this.coinno);
      this.coinno=this.$route.query.coinid+"_"+this.$route.query.maincoinid;
      this.websock= new WebSocket("wss://www.xjsex.co/ws/websocket/"+this.userno+"/"+this.coinno);
      // this.websock = new WebSocket(wsuri); 
      // //连接成功
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = this.onbeforeunload
    }, 
    websocketonopen(){ //连接建立之后执行send方法发送数据
        // this.websocketsend(this.user)
        console.log('WebSocket连接成功');
    },
    websocketonerror(){//连接建立失败重连
        this.initWebSocket()
    },
    websocketonmessage(e){
      //数据接收 
      // console.log(e.data);
      const redata = JSON.parse(e.data);
      // const redata =e.data;
      //注意：长连接我们是后台直接1秒推送一条数据， 
      //但是点击某个列表时，会发送给后台一个标识，后台根据此标识返回相对应的数据，
      //这个时候数据就只能从一个出口出，所以让后台加了一个键，例如键为1时，是每隔1秒推送的数据，为2时是发送标识后再推送的数据，以作区分
      // console.log(redata); 
      let _this = this //数据接收
      if (redata!= '') {//这个判断是我业务需求才加的
        _this.currentCoinInfo=redata.info[0];//币种信息
        // console.log(redata.info);
        // _this.latestBuyData=redata.buy;//买入五档
        // _this.latestSoldData=redata.sell;//卖出五档
        // _this.historicalBuyData=redata.top;//成交历史
        _this.latestBuyData = this.Util.sumCalc(
          redata.buy,
          "price",
          "number"
        );
        _this.latestSoldData = this.Util.sumCalc(
          redata.sell,
          "price",
          "number"
        );
        _this.historicalBuyData = this.Util.sumCalc(
          redata.top,
          "price",
          "number"
        );
        }else{
          return
        }
        //业务需求，将socket接收到的值存进vuex
        //_this.$store.store.dispatch('RESET_ID') //先调用reset方法置空vuex > store里面的scorketId（为什么置空，下面标题3解释）
        //_this.$store.store.dispatch('SAVE_ID', JSON.parse(e.data).areaId) //重新给store中的scorketId赋值（数据格式问题先转了json）
        // console.log(_this.$store.store.state.scorketId);
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data)
      },
      websocketclose(e){  //关闭
        console.log('断开连接', e)
    },
    // 通过轮询刷新数据
    updateListByAjax(maincoin, tradecoin) {
      return
      this.getLiveData(maincoin, tradecoin);
      if (this.timer) clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (ajaxDone) {
          this.getCurrentInfo(maincoin, tradecoin);
          this.getLiveData(maincoin, tradecoin);
        }
        ajaxDone = false;
      }, 3000);
    },
    //获取实时数据
    getLiveData(maincoin, tradecoin) {
      let params = {
        maincoin: maincoin,
        tradcoin: tradecoin
      };
      //最新价格
      this.getCurrentInfo(maincoin, tradecoin);
      // 买入五档
      this.request(this.api.buyorder, params).then(res => {
        this.latestBuyData = this.Util.sumCalc(
          res.data.list,
          "price",
          "number"
        );
      });
      // 卖出五档
      this.request(this.api.sellorder, params).then(res => {
        this.latestSoldData = this.Util.sumCalc(
          res.data.list,
          "price",
          "number"
        );
      });
      // 交易记录
      const allOrder = this.request(this.api.gettoporder, params).then(res => {
        this.historicalBuyData = this.Util.sumCalc(
          res.data.list,
          "price",
          "number"
        );
        ajaxDone = true;
      });
    },
    // 单列样式
    myCellStyle() {
      return "padding:6px 0 !important;border:none";
    },
    onLatestClick(data) {
      this.buyFormData.price = data.price * 1;
      this.sellFormData.price = data.price * 1;
    },
    loadData(data) {
      this.showLoading = true;
      this.maincoin = data.maincoinid;
      this.tradecoin = data.coinid;
      this.tradcoin=data.coinid;
      // 广播
      // 拼接WebSocket 币种名字
      this.coinno=this.maincoin+"_"+this.tradecoin;
      console.log(this.coinno);
      this.Util.setCookie("maincoinname", data.maincoinid);
      this.Util.setCookie("tradcoinname", data.coinid);
      // this.iframUrl = `${this.iframUrl}t=${new Date().getTime()}`;
      // 刷单配置
      this.getapido(this.maincoin, this.tradecoin);
      this.start(this.timeall,this.maincoin,this.tradecoin);
      //获取最新的价格信息
      this.getCurrentInfo(this.maincoin, this.tradecoin);
      //获取可用;
      this.getAvailabel(this.maincoin).then(res => {
        this.myBlance = res.usable;
      });
      this.getAvailabel(this.tradecoin).then(res => {
        this.myAvailable = res.usable;
      });
      // 获取币种交易信息
      this.getTradeResult(this.maincoin, this.tradecoin);
      this.updateListByAjax(this.maincoin, this.tradecoin);
      // 获取买入卖出 历史信息
      this.getLiveData(this.maincoin, this.tradecoin);
    },
    //获取委托数据
    getTradeResult(maincoin, tradecoin) {
      let params = {
        maincoin: maincoin,
        tradcoin: tradecoin
      };
      // 获取当前委托
      this.request(this.api.getentrust, params).then(res => {
        if (res.code == "0") {
          this.currentDeclareData = this.Util.sumCalc(
            res.data.list,
            "price",
            "number"
          );
        }
      });
      // 获取历史委托
      this.request(this.api.gethistoryorder, params).then(res => {
        if (res.code == "0") {
          this.historicalDeclareData = res.data.list;
        } else {
          return Promise.reject(res.msg);
        }
      });
    },
    // 最新交易信息
    getCurrentInfo(maincoin, tradcoin) {
      return this.request(this.api.searchcoin, { maincoin, tradcoin }).then(
        res => {
          this.currentCoinInfo = res.data.list[0];
          this.coinPrice=this.currentCoinInfo.heightprice;
          this.coinPricegas=this.currentCoinInfo.pricegas;
        }
      );
    },
    randomNum(min, max) {
      return Math.random() * (max - min) + min;
    },
    getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min; 
    },
    getIntNum(min,max){
      return Math.floor(Math.random()*max+min);//(2-5分钟)
    },
    //刷单配置
    getapido(maincoin, tradcoin) {
      let that = this;
      if (that.timerOut) clearTimeout(that.timerOut);
      that.request(that.api.getapido, { maincoin, tradcoin }).then(res => {
        let data = res.data.list[0];
        that.apidoData.heightprice=data.heightprice;
        that.apidoData.pricegas=data.pricegas;
        that.apidoData.lowPrice = data.lastprice;
        that.apidoData.number=data.number;
        that.apidoData.numbergas=data.numbergas;
        that.apidoData.time=data.tradtime;
        if (!data) return;
        let time = data.tradtime;
        let timeOut = Math.floor(Math.random() * (2 * time + 5));
        console.log("timeOut"+timeOut);
        
        that.timerOut = setTimeout(function func() {
          let price = 0;
          let nowPrice = that.currentCoinInfo.prise * 1;
          let highPrice = data.heightprice;//最高价
          let lowPrice = data.lastprice;//最低价
          let pricegas =data.pricegas;
          let number = that.randomNum(
            data.number * 1 - data.numbergas * 1,
            data.number * 1 + data.numbergas * 1
          );
          let number2 = that.randomNum(0,number);
          timeOut = Math.floor(Math.random() * (2 * time + 5));
          that.timerOut = setTimeout(func, timeOut *10000);
          
         }, timeOut * 60000);
        return that.apidoData
      });
    },
    // 买卖函数 交易函数
    forbuyORshell(maincoin,tradcoin,number,price,number2,time,timeOut,func){
      if (this.timer) clearInterval(this.timer);
      if(number==""){
        number=10.01
      }
      // return
      // return
      
      
        console.log("818行number"+number);
        time =5;
        timeOut = Math.floor(Math.random() * (2 * time + 5));
        console.log("timeOut"+timeOut);
        var that =this;
        that.timerOut = setTimeout(function func() {
      // 买卖函数   
      // 执行买卖函数
      if(Math.random() * 10 > 5){
            console.log('price797行'+price);
            if(price==NaN ||price==""){
              console.log('800行');
              price = this.randomNum(
                data.heightprice * 1 - data.pricegas * 1/2+data.pricegas * 1,
                data.heightprice * 1 + data.pricegas * 1
              );
              console.log('price810行'+price);
            }else{
              price=this.randomNum(
                this.data.heightprice*1 -(this.data.pricegas * 1)/5,
                this.data.heightprice * 1 + data.pricegas * 1/2+data.pricegas * 1,
              )
              console.log('815price'+price);
            }
              console.log('826price'+price);
              that.tradeHandle(that.api.forbuy, {
                maincoin: maincoin,
                tradecoin: tradcoin,
                number: number,
                price: price
              })
              .then(res => {
                if (res.code != 0) {
                  clearTimeout(that.timerOut);
                  return;
                }else{
                  // that.sellHandle();
                  // 卖出单子
                  // 广播
                  that.sendSocketMes();
                  if (that.timer) clearInterval(that.timer);
                  that.timer=setInterval(() =>{
                  that.tradeHandle(that.api.forsell, {
                      maincoin:maincoin,
                      tradecoin:tradcoin,
                      number: number2,
                      price: price
                    })
                    .then(res => {
                      if (res.code != 0) {
                        clearTimeout(that.timerOut);
                        return;
                      }else{
                        // 广播
                        that.sendSocketMes();
                      }
                      
                    });
                  },6000)  
                }
                timeOut = Math.floor(Math.random() * (2 * time + 5));
                that.timerOut = setTimeout(func, timeOut * 6000);
              });
            }else{
              if (this.timer) clearInterval(this.timer);
              console.log('卖-买');
              that.tradeHandle(that.api.forsell, {
                maincoin: maincoin,
                tradecoin: tradcoin,
                number: number,
                price: price
              })
              .then(res => {
                if (res.code != 0) {
                  clearTimeout(that.timerOut);
                  return;
                }else{
                  // that.sellHandle();
                  // 卖出单子
                  // 广播
                  if (that.timer) clearInterval(that.timer);
                  that.sendSocketMes();
                  that.timer=setInterval(() =>{
                  that.tradeHandle(that.api.forbuy, {
                      maincoin:maincoin,
                      tradecoin:tradcoin,
                      number: number2,
                      price: price
                    })
                    .then(res => {
                      if (res.code != 0) {
                        clearTimeout(that.timerOut);
                        return;
                      }else{
                        // 广播
                        that.sendSocketMes();
                      }
                    });
                    },10000)  
                }
                
              });
              
            }
          timeOut = Math.floor(Math.random() * (2 * time + 5));
          that.timerOut = setTimeout(func, timeOut *10000);
        }, timeOut * 1000); 
    },
    // 获取账户状态
    getState() {
      return this.request(this.api.saftyState).then(res => {
        console.log(`账号状态：${JSON.stringify(res)}`);
        if (res && res.code != "0") {
          this.getDataFaild(res.msg);
          return false;
        }
        if (res.data && res.data.list) {
          this.bindState = res.data.list[0];
          this.canTrade = this.canTradeCheck(this.bindState);
        }
      });
    },
    // 获取可用
    getAvailabel(coin) {
      return this.request(this.api.getdaynumber, {
        coin: coin
      }).then(res => {
        this.showLoading = false;
        if (res.code == "0") {
          return Promise.resolve(res.data.list[0]);
        } else {
          return Promise.reject(res.msg);
        }
      });
    },
    // 获取充值地址
    getchargeAddress(coin) {
      this.request(this.api.getaddress, { coin: coin }).then(res => {
        console.log(`充币地址${JSON.stringify(res)}`);
        if (res && res.code != "0") return this.getDataFaild(res.msg);
        this.chargeAddress = res.data.address[0].address;
      });
    },
    // 交易操作
    tradeHandle(api, params) {
      return this.request(api, {
        maincoin: params.maincoin || "",
        tradcoin: params.tradecoin || "",
        prise: params.price || "",
        number: params.number || "",
        showLoading: true
      }).then(res => {
        console.log(`操作结果：${JSON.stringify(res)}`);
        if (res.code == "0") {
          this.getTradeResult(params.maincoin, params.tradecoin);
          this.successMsg(res.msg || "操作成功");
          this.myBlance -= this.buyTotal;
          this.myAvailable -= this.sellTotal;
        } else {
          this.errMsg(res.msg);
        }
        return Promise.resolve(res);
      });
    },
    // 删除列表某一项
    delItemFromList(id, listArr) {
      listArr.map((item, index) => {
        if (item.id == id) {
          listArr.splice(index, 1);
          return listArr;
        }
      });
    },
    // 取消订单
    cancelOrder(id, type, num, price) {
      if (!this.storage.get("tradePasswordChecked")) {
        this.$prompt("请输入交易密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S/,
          inputType: "password",
          inputErrorMessage: "交易密码不能为空"
        })
          .then(({ value }) => {
            checkTradePassword(value).then(res => {
              if (res.code != 0) {
                this.storage.set("tradePasswordChecked", false);
                this.errMsg("交易密码不正确");
              } else {
                this.storage.set("tradePasswordChecked", true);
                this.successMsg(res.msg);
              }
            });
          })
          .catch(() => {});
      }
      this.showLoading = true;
      this.request(this.api.clearentrust, { id: id }).then(res => {
        console.log(`操作结果：${JSON.stringify(res)}`);
        if (res && res.code != "0") {
          this.getDataFaild(res.msg);
          return false;
        }
        this.getTradeResult(this.maincoin, this.tradecoin);
        this.successMsg(res.msg);
        this.delItemFromList(id, this.currentDeclareData);
        if (type == 0) {
          this.myBlance += this.Util.accMul(num, price);
        } else {
          this.myAvailable += this.Util.accMul(num, price);
        }
        this.showLoading = false;
      });
    },
    //校验
    valideForm(number, price) {
      if (isNaN(price) || !price) {
        this.errMsg("请输入有效价格");
        return false;
      }
      if (!number) {
        this.errMsg("买入量/卖出量不能为空");
        return false;
      }
      if (!this.Util.isInt(number)) {
        this.errMsg("买入量/卖出量必须是整数");
        return false;
      }
      return true;
    },
    // 买forbuy
    buyHandle() {
      let price = this.buyFormData.price * 1;
      let num = this.buyFormData.orderVol * 1;
      if (!this.userData.isLogin) {
        this.errMsg("label120" || "请登录后操作");
      } else if (!this.storage.get("tradePasswordChecked")) {
        this.$prompt("请输入交易密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S/,
          inputType: "password",
          inputErrorMessage: "交易密码不能为空"
        })
          .then(({ value }) => {
            checkTradePassword(value).then(res => {
              if (res.code != 0) {
                this.storage.set("tradePasswordChecked", false);
                this.errMsg("交易密码不正确");
              } else {
                this.storage.set("tradePasswordChecked", true);
                this.successMsg(res.msg);
              }
            });
          })
          .catch(() => {});
      } else if (this.valideForm(num, price)) {
        this.tradeHandle(this.api.forbuy, {
          maincoin: this.maincoin,
          tradecoin: this.tradecoin,
          number: this.buyFormData.orderVol,
          price: this.buyFormData.price
        });
      }
    },
    // 卖 forsell
    sellHandle() {
      let price = this.sellFormData.price * 1;
      let num = this.sellFormData.orderVol * 1;
      if (!this.userData.isLogin) {
        this.errMsg("label120" || "请登录后操作");
      } else if (!this.storage.get("tradePasswordChecked")) {
        this.$prompt("请输入交易密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S/,
          inputType: "password",
          inputErrorMessage: "交易密码不能为空"
        })
          .then(({ value }) => {
            checkTradePassword(value).then(res => {
              if (res.code != 0) {
                this.storage.set("tradePasswordChecked", false);
                this.errMsg("交易密码不正确");
              } else {
                this.storage.set("tradePasswordChecked", true);
                this.successMsg(res.msg);
              }
            });
          })
          .catch(() => {});
      } else if (this.valideForm(num, price)) {
        this.tradeHandle(this.api.forsell, {
          maincoin: this.maincoin,
          tradecoin: this.tradecoin,
          number: this.sellFormData.orderVol,
          price: this.sellFormData.price
        });
      }
    },
    //表格列点击
    getRowData(data,e) {
      // if (mainCoinModel.tradecoinid == data.coinid) return false;
      mainCoinModel.tradecoinid = data.coinid;
      mainCoinModel.coinid = data.maincoinid;
      // 拼接WebSocket 币种名字
      this.coinno=mainCoinModel.coinid+"_"+mainCoinModel.tradecoinid;
      this.$router.replace(`/trade/auto?maincoinid=${mainCoinModel.coinid}&coinid=${mainCoinModel.tradecoinid}`);
      // 推送币种信息
      this.websock.onclose(data);//关闭-》暂时用刷新关闭
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          window.location.reload();
          loading.close();
        },1000);
      this.latestBuyData = [];
      this.latestSoldData = [];
      //当日委托
      this.currentDeclareData = [];
      //历史委托
      this.historicalDeclareData = [];
      //成交历史
      this.historicalBuyData = [];
      
      // 发送新的长链接请求
      // 先关闭
      this.websocketclose(e);
      // 再发送
      this.loadData(data);
      this.coinno=mainCoinModel.coinid+"_"+mainCoinModel.tradecoinid;
      console.log(this.coinno);
      if ('WebSocket' in window) {
      // this.websocket = new WebSocket('ws://localhost:8080/JavaWebSocket/websocket')
        // this.websock= new WebSocket("ws://192.168.16.223/ws/websocket/"+this.userno+"/"+this.coinno);
        this.initWebSocket();
        
      } else {
        this.loadData(data);
        alert('当前浏览器 Not support websocket')
      };
    },
    // 是否能够交易
    canTradeCheck(statesObj) {
      if (!this.Util.dataType(statesObj) == "object") return false;
      if (
        statesObj.tradstate > 0 &&
        statesObj.bankstate > 0 &&
        statesObj.idcardstate > 0 &&
        statesObj.googlestate > 0
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 打开弹窗
    showChargeBox() {
      if (
        this.chargeAddress == "" ||
        mainCoinModel.tradecoinid != this.tradecoin
      ) {
        this.getchargeAddress(this.tradecoin);
      }
      this.show = true;
    },
    //自动刷单
    // 32位随机码
    getNum(){
				var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
				var nums="";
				for(var i=0;i<32;i++){
					var id = parseInt(Math.random()*61);
					nums+=chars[id];
        }
        console.log(nums);
				return nums;
		},
    // 广播
    sendSocketMes(){
      // 买入成功后广播
      // var ToSendUserno=mc+"_"+tc;//向相同交易币种的用户推送消息
      var ToSendUserno =this.coinno;
      var message=ToSendUserno;
      this.websock.send(message);//发送通知
      console.log('数据广播群组用户中。。。');
      
    },
    // 新模式卖》卖
    newShell(){
      console.log('卖》买');
    },
    newBuy(){
      console.log("买-》卖")
    },
    // 价格涨
    priceDown(price,pricegas,timeall){
      this.priseArrDown = [];
        var a=[];
				//this.price = 260; [260, 255, 250, 245, 240]
				for (let i = 0; i < timeall; i++) {
					if(i==0){
						var num=price;
						a.push(num);
					}else if(i==1){
						var num=a[0]+(pricegas/timeall);
						a.push(num);
					}else if(i==2){
						var num=a[1]+(pricegas/timeall);
						a.push(num);
					}else if(i==3){
						var num=a[2]+(pricegas/timeall);
						a.push(num);
					}else if(i==4){
						var num=a[3]+(pricegas/timeall);
						a.push(num);
					}
				}
        console.log(a);
        return this.priseArrDown
    },
    priceup(price,pricegas,timeall){
        this.priseArrUp = [];
        var a=[];
				// [260, 255, 250, 245, 240]
				for (let i = 0; i < timeall; i++) {
					if(i==0){
            var num=price;
						a.push(num);
					}else if(i==1){
						var num=a[0]-(pricegas/timeall);
						a.push(num);
					}else if(i==2){
						var num=a[1]-(pricegas/timeall);
						a.push(num);
					}else if(i==3){
						var num=a[2]-(pricegas/timeall);
						a.push(num);
					}else if(i==4){
						var num=a[3]-(pricegas/timeall);
						a.push(num);
					}
				}
        return this.priseArrUp
    },
    // 倒计时timemint  新机器人
    start(timeall,maincoin,tradcoin){
      console.log('tradcoin-maincoin'+this.tradcoin+this.maincoin);
      
      console.log("timeall分钟"+timeall);
      if (this.timer) clearInterval(this.timer);
      setInterval(() => { 
        console.log('请求了')
        this.getapido(this.maincoin, this.tradecoin);
      // return
      // 取 timeall 来判断执行几次价格区间
      console.log(this.apidoData);
      var redomNum=Math.floor(Math.random()*10+1);//用来判断价格是涨还是跌
      // var price=Number(this.apidoData.heightprice);
      if(redomNum > 5){
        console.log('大于5涨价');
        
          var a=[];
          for (let i = 0; i < this.timeall; i++) {
            if(i==0){
              var num=Number(this.apidoData.heightprice);
              a.push(num);
            }else if(i==1){
              var num=a[0]+(this.apidoData.pricegas/this.timeall);
              console.log(num);
              a.push(num);
            }else if(i==2){
              var num=a[1]+(this.apidoData.pricegas/this.timeall);
              a.push(num);  
            }else if(i==3){
              var num=a[2]+(this.apidoData.pricegas/this.timeall);
              a.push(num);
            }else if(i==4){
              var num=a[3]+(this.apidoData.pricegas/this.timeall);
              a.push(num);
            }
          }
          this.priseArrUp=a.map(Number);//涨价数组
          console.log(this.priseArrUp);
          
          }else{
            console.log('小于5下跌');
            var a=[];
          for (let i = 0; i < this.timeall; i++) {
            console.log(i);
            if(i==0){
              var num=Number(this.apidoData.heightprice);
              a.push(num);
            }else if(i==1){
              var num=a[0]-(this.apidoData.pricegas/this.timeall);
              console.log(num);
              a.push(num);
            }else if(i==2){
              var num=a[1]-(this.apidoData.pricegas/this.timeall);
              a.push(num);  
            }else if(i==3){
              var num=a[2]-(this.apidoData.pricegas/this.timeall);
              a.push(num);
            }else if(i==4){
              var num=a[3]-(this.apidoData.pricegas/this.timeall);
              a.push(num);
            }
          }
          console.log(a);
          console.log(a.map(Number));
          this.priseArrDown=a.map(Number);//降价数组
          
          
          
          }
          console.log('降价数组'+this.priseArrDown);
          console.log('涨价数组'+this.priseArrUp);
          let number = this.randomNum(
            this.apidoData.number * 1 - this.apidoData.numbergas * 1,
            this.apidoData.number * 1 + this.apidoData.numbergas * 1
          );
          let number2 = this.randomNum(0,number);
          console.log('this.timeall分钟'+this.timeall);
          // console.log(this.apidoData.heightprice);
          // console.log(Number(this.apidoData.pricegas));
          // console.log(Number(this.timeall));
          // let price =Number(this.apidoData.heightprice)-(Number(this.apidoData.pricegas)/Number(this.timeall));
          // console.log('price'+price);
          
        for (var i = 0; i <this.timeall; i++) {
          console.log(i);
          if(i==0){
              // return
							console.log('i==0');
              if(redomNum<5){
                console.log('降价redomNum<5')
                // 降价
                this.price = this.randomNum(
                    this.priseArrDown[0],this.priseArrDown[1]
                );
                // console.log(price);
                let price=Number(this.price)
                console.log(price);
                // if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了1');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    // clearInterval(this.timer)
                    // },1000);
                  },6000);
                }else{
                  //涨价
                  console.log('redomNum>5')
                  this.price = this.randomNum(
                    this.priseArrUp[0],this.priseArrUp[1]
                  );
                  console.log('涨价的随机数'+price);
                  let price=Number(this.price)
                  console.log(price);
                  // this.forbuyORshell(maincoin,tradcoin,number,price,number2)
                  if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了1');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    // clearInterval(this.timer)
                    // },6000);
                  },8000);
                }
						}else if (i==1) {
              console.log('i==1');
              if(redomNum<5){
                console.log('降价redomNum<5')
                // 降价
                let price = this.randomNum(
                    this.priseArrDown[1],this.priseArrDown[2]
                );
                console.log(price);
                price=Number(price)
                console.log(price);
                if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了2');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    clearInterval(this.timer)
                    // },6000);
                  },10000);
                }else{
                  //涨价
                  console.log('redomNum>5')
                  let price = this.randomNum(
                    this.priseArrUp[1],this.priseArrUp[2]
                  );
                  console.log('涨价的随机数'+price);
                  price=Number(price)
                  console.log(price);
                  // this.forbuyORshell(maincoin,tradcoin,number,price,number2)
                  if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了2');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    clearInterval(this.timer)
                    // },6000);
                  },12000);
                }
						}else if (i==2) {
							console.log('i==2');
              if(redomNum<5){
                console.log('降价redomNum<5')
                // 降价
                let price = this.randomNum(
                    this.priseArrDown[2],this.priseArrDown[3]
                );
                console.log(price);
                price=Number(price)
                console.log(price);
                if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    clearInterval(this.timer)
                    // },6000);
                  },14000);
                }else{
                  //涨价
                  console.log('redomNum>5')
                  let price = this.randomNum(
                    this.priseArrUp[2],this.priseArrUp[3]
                  );
                  console.log('涨价的随机数'+price);
                  price=Number(price)
                  console.log(price);
                  // this.forbuyORshell(maincoin,tradcoin,number,price,number2)
                  if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    clearInterval(this.timer)
                    // },6000);
                  },15000);
                }
						}else if (i==3) {
							console.log('i==3');
              if(redomNum<5){
                console.log('降价redomNum<5')
                // 降价
                let price = this.randomNum(
                    this.priseArrDown[2],this.priseArrDown[3]
                );
                console.log(price);
                price=Number(price)
                console.log(price);
                 if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了1');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    clearInterval(this.timer)
                    // },1000);
                  },16000);
                }else{
                  //涨价
                  console.log('redomNum>5')
                  let price = this.randomNum(
                    this.priseArrUp[2],this.priseArrUp[3]
                  );
                  console.log('涨价的随机数'+price);
                  price=Number(price)
                  console.log(price);
                  // this.forbuyORshell(maincoin,tradcoin,number,price,number2)
                   if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了1');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    clearInterval(this.timer)
                    // },1000);
                  },17000);
                }
						}else if (i==4) {
							console.log('i==4');
              if(redomNum<5){
                console.log('降价redomNum<5')
                // 降价
                let price = this.randomNum(
                    this.priseArrDown[0],this.priseArrDown[3]
                );
                console.log(price);
                price=Number(price)
                console.log(price);
                 if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了1');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    clearInterval(this.timer)
                    // },1000);
                  },18000);
                }else{
                  //涨价
                  console.log('redomNum>5')
                  let price = this.randomNum(
                    this.priseArrUp[0],this.priseArrUp[3]
                  );
                  console.log('涨价的随机数'+price);
                  price=Number(price)
                  console.log(price);
                  // this.forbuyORshell(maincoin,tradcoin,number,price,number2)
                   if (this.timer) clearInterval(this.timer);
                  this.timer=setInterval(() =>{
                    console.log('进入6S倒计时了1');
                    // this.timer=setInterval(() =>{
                    this.forbuyORshell(maincoin,tradcoin,number,price,number2,)
                    clearInterval(this.timer)
                    // },1000);
                  },19000);
              }
						}
        }
      }, this.timeall*3000)  
    }
  },
  computed: {
    amountLabel() {
      return `${this.$t("amount")}(${this.tradecoin})`;
    },
    buyingLabel() {
      return `${this.$t("buy")}&nbsp;${this.tradecoin}`;
    },
    sellingLabel() {
      return `${this.$t("sell")}&nbsp;${this.tradecoin}`;
    },
    priceLabel() {
      return `${this.$t("price")}(${this.maincoin})`;
    },
    totalLabel() {
      return `${this.$t("total")}(${this.maincoin})`;
    },
    marketVolLabel() {
      return `${this.$t("marketVol")}(${this.tradecoin})`;
    },
    //可用余额
    availabelBalance() {
      let num = this.myBlance * 1;
      return `${this.$t("avilable")}&nbsp;${num || 0}&nbsp;${this.maincoin}`;
    },
    //可兑换额度
    availabelAmount() {
      return `${this.$t("canExchange")}&nbsp;${this.myAvailable * 1 ||
        0}&nbsp;${this.tradecoin}`;
    },
    // 最新价
    latestPrice() {
      return `${this.$t("latestPrice")}&nbsp;${this.currentCoinInfo.prise * 1}`;
    },
    //总数
    buyTotal() {
      return this.Util.accMul(
        this.buyFormData.price,
        this.buyFormData.orderVol
      );
    },
    //总数
    sellTotal() {
      return this.Util.accMul(
        this.sellFormData.price,
        this.sellFormData.orderVol
      );
    },
    //最新买入总计
    buyListTotal() {
      let total = 0;
      this.latestBuyData.map(item => {
        total += item.total * 1;
      });
      return total;
    },
    //最新卖出总计
    sellListTotal() {
      let total = 0;
      this.latestSoldData.map(item => {
        total += item.total * 1;
      });
      return total;
    },
  },
  watch: {
    buyFormData: {
      handler: function(val, oldVal) {
        this.buyBtnDisabled = false;
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
$mr: 11px;
.break-line {
  @include breakLine;
}
$border: 1px solid #e5e5e5;
.el-container {
  border-bottom: $border;
}

.trade-market {
  width: 34%;
  > div:first-child {
    margin-bottom: 12px;
  }
}
.vertical-line {
  height: 360px;
  width: 1px;
  background: $bd-color;
  transform: scaleX(0.5);
  bottom: 0;
}
.no-data {
  line-height: 60px;
  text-align: center;
  color: #999;
}
.table {
  .thead {
    @include textVcenter();
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 15px;
    @media screen and(max-width: 1366px) {
      font-size: 13px;
    }
    span {
      display: block;
      flex: 1.5;
      &:first-child {
        flex: 1;
      }
      &:last-child {
        flex: 1.5;
      }
    }
  }
  .tbody {
    max-height: 175px;
    overflow: auto;
    .column {
      position: relative;
      display: block;
      flex: 2;
      &:nth-child(2) {
        flex: 1;
      }
      &:last-child {
        flex: 1;
      }
    }
  }
  .row {
    height: 35px;
    line-height: 35px;
    padding: 0 8px;
    justify-content: space-between;
    &:hover {
      background: #f1f1f1 !important;
    }
    .progress {
      // 深度背景颜色
      background: #1dbd56;
      opacity: 0.4;
      top: 0;
      right: 0;
      height: 80%;
    }
    .progressred {
      // 深度背景颜色
      background: #dc5050;
      opacity: 0.4;
      top: 0;
      right: 0;
      height: 80%;
    }
  }
}
.panel-head {
  @include textVcenter;
  border-bottom: 1px solid #fcfcfc;
  .heading {
    font-weight: 500;
    font-size: $font-large;
  }
  .currency-thumb {
    margin-right: $mr;
  }
  .market-val {
    margin-left: $mr;
    span:first-child {
      font-weight: 500;
      margin-right: $mr;
    }
  }
  .market-condition {
    span {
      padding-left: 23px;
    }
    i {
      padding-left: $mr;
    }
  }
}
.k-map {
  // height: 514px;
  margin-bottom: 25px;
}
.form-wrap {
  width: 48%;
  .break-line {
    margin-top: 12px;
  }
  .total {
    margin-top: 19px;
  }
  button {
    margin-top: 22px;
  }
  .account {
    margin-top: 14px;
    a {
      color: $color-danger;
    }
  }
}
.input-group {
  margin-top: 19px;
  .unit {
    line-height: 40px;
    color: #333;
    padding-right: 6px;
  }
  .el-input {
    margin-top: 10px;
  }
  .hint {
    display: inline-block;
    margin-top: $mr;
  }
}
.panel-container {
  .panel-title {
    margin-top: 30px;
    margin-bottom: 12px;
  }
  .content-lf {
    width: 64%;
    .handle {
      cursor: pointer;
    }
  }
  .content-rt {
    width: 34%;
  }
}
</style>
